<meta meta="邀请图集配置" args="data"/>
<style>

</style>
<div>
    <div class="m-b-xs">
        <div class="btn-group">
            <a href="javascript:;" class="btn btn-default btn-xs"
               s-click="selectIcon()">
                <i class="fa fa-plus"></i> 新增
            </a>
        </div>
        <a href="javascript:;" class="btn btn-default btn-xs s-loading-icon "
           s-click="return $picsGrid.refresh()">
            <i class="fa fa-refresh s-loading-spinner"></i>
        </a>
        <span class="label label-warning">拖动图标进行排序</span>
    </div>
    <div id="picsGrid"
         s='datac,nda'
         s-data-filter="'picList'"
         s-data="data">
        <table class="table table-middle table-striped table-hover table-bordered table-condensed" style="width: 100%;">
            <tr>
                <th>图片</th>
                <th class="text-right">操作</th>
            </tr>
            <tbody s="loop" id="picList">
            <tr s-loop-role="empty">
                <td colspan="2">
                    <div class="p text-center">
                        未查询到数据
                    </div>
                </td>
            </tr>
            <tr s-loop-role="row" class="data-row" s="datac" s-check-role="i">
                <td s="tpl">
                    <img class="sorthandle" src="{%=this.url%}" style="max-width: 150px; max-height: 100px;"/>
                </td>
                <td class="text-right">
                    <input autocomplete="off" type="button" class="btn btn-xs btn-link" s-click="del(this)" value="删除"/>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    $picList.node.sortable({
        handle: ".sorthandle",
        update: function() {
            // save()
        }
    });

    function del(s) {
        s.node.closest("tr").remove();
    }

    // function save() {
    //     var picList = [];
    //     $picList.node.find(".data-row").each(function() {
    //         var tr = $(this);
    //         var $tr = Smart.of(tr);
    //         var data = $tr.data();
    //         picList.push(data);
    //     })
    //     S.post("/api/setting", {
    //         key: 'IndexBannerSetting',
    //         version: version,
    //         content: JSON.stringify({
    //             picList: picList
    //         })
    //     }).done(function() {
    //         S.toast("保存成功", 'success');
    //     })
    // }

    S.getContent = function() {
        var deferred = $.Deferred();
        var picList = [];
        $picList.node.find(".data-row").each(function() {
            var tr = $(this);
            var $tr = Smart.of(tr);
            var data = $tr.data();
            picList.push(data);
        })
        deferred.resolve({
            picList: picList
        })
        return deferred;
    }

    function selectIcon() {
        S.popupOpen("/oss/objects-selector.html", {prefix: 'operation'}).done(function(datas) {
            if(datas) {
                $picList.addRows(datas)
            }
        })
    }
</script>